<template>
  <div>
    <el-card style="margin-bottom:10px">
      <!-- <img class="img" :src="logo" alt="logo" /> -->
      <span class="title">
        智慧残联数据大屏
      </span>
    </el-card>
    <div class="container">
      <div class="lt">
        <el-card style="height:100%">
          <div style="text-align:center;font-size:3vw;margin:4vh">
            {{ count[1].value }}
          </div>
          <div style="color:#909399">
            {{ count[1].name }}
          </div>
        </el-card>
      </div>
      <div class="lv">
        <el-card>
          <div>
            <div style="font-size:2vw">
              {{ count[0].value }}
            </div>
            <div style="color:#909399">
              {{ count[0].name }}
            </div>
          </div>
        </el-card>
      </div>
      <div class="ls">
        <el-card>
          <div>
            <div style="font-size:2vw">
              {{ count[2].value }}
            </div>
            <div style="color:#909399;">
              {{ count[2].name }}
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
// import logo from "@/assets/cl-logo.png";
export default {
  name: "leftTop",
  created() {
    this.API.getCount().then(res => {
      for (const key in res.data) {
        if (Object.hasOwnProperty.call(res.data, key)) {
          const val = res.data[key];
          this.count.push({ name: key, value: val });
        }
      }
    });
    console.log(this.count);
  },
  data() {
    return {
      // logo,
      count: []
    };
  }
};
</script>

<style scoped>
/deep/ .el-card__header {
  padding: 10px 20px;
}
.el-card {
  color: #303133;
  font-size: 1vw;
  font-weight: 100;
}
.container {
  display: grid;
  grid-template:
    "lt lv"
    "lt ls";
  gap: 10px;
}
.lt {
  grid-area: lt;
}
.lv {
  grid-area: lv;
}
.ls {
  grid-area: ls;
}
.el-row:nth-child(1) {
  margin-bottom: 0.4vw;
}
.img {
  float: left;
  width: 50px;
  transform: translate(-25%, -20%);
}
.title {
  font-weight: bold;
}
.ll {
  color: #909399;
}
.ln {
  font-size: 2vw;
  font-weight: bold;
  text-align: center;
  line-height: 10vh;
}
@media screen and (min-width: 1980px) {
  .el-row:nth-child(1) {
    margin-bottom: 4vw;
  }
}
</style>
